<template>
<div>
<el-button @click="onSubmit(1)">刷新数据</el-button>
  <el-button @click="dialogFormVisible = true">添加访客数据 <i class="el-icon-circle-plus-outline"></i></el-button>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="formInline.name" placeholder="姓名" clearable @clear="onSubmit(1)"></el-input>
    </el-form-item>

    <el-form-item label="年龄">
      <el-input v-model="formInline.age" placeholder="年龄" clearable @clear="onSubmit(1)"></el-input>
    </el-form-item>

    <el-form-item label="手机号">
      <el-input v-model="formInline.phone" placeholder="手机号" clearable @clear="onSubmit(1)"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit(1)">查询</el-button>
    </el-form-item>

  </el-form>
  <el-dialog title="添加信息" :visible.sync="dialogFormVisible">
    <el-form :model="visitor" :rules="rules" ref="rulesForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="visitor.name" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input v-model="visitor.age" autocomplete="off"></el-input>
      </el-form-item>
      性别
      <el-radio v-model="visitor.gender" :label="1">男</el-radio>
      <el-radio v-model="visitor.gender" :label="0">女</el-radio>

      <el-form-item label="电话" prop="phone">
        <el-input v-model="visitor.phone" autocomplete="off" ></el-input>
      </el-form-item>

      <div class="block">
        <span class="demonstration">开始时间</span>
        <el-date-picker
            v-model="visitor.startTime"
            type="date"
            :picker-options="pickerstartTime"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
        </el-date-picker>

        <span class="demonstration">结束时间</span>
        <el-date-picker
            v-model="visitor.endTime"
            type="date"
            :picker-options="pickerendTime"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
        </el-date-picker>
      </div>

      是否确认
      <el-radio v-model="visitor.check" :label="1">是</el-radio>
      <el-radio v-model="visitor.check" :label="0">否</el-radio>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="visitor.remark" autocomplete="off"></el-input>
      </el-form-item>

      是否离开
      <el-radio v-model="visitor.leave" :label="1">是</el-radio>
      <el-radio v-model="visitor.leave" :label="0">否</el-radio>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleContinue">确 定</el-button>
    </div>
  </el-dialog>

  <!-- 修改设备弹框 -->
  <el-dialog title="修改信息" :visible.sync="dialogFormVisibleByUpdate" width="50%" >
    <el-form :model="updatevisitor" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="姓名"  prop="name">
        <el-input v-model="updatevisitor.name" autocomplete="off" ></el-input>
      </el-form-item>

      <el-form-item label="年龄"  prop="age">
        <el-input v-model="updatevisitor.age" autocomplete="off" ></el-input>
      </el-form-item>

      性别
      <el-radio v-model="updatevisitor.gender" :label="1">男</el-radio>
      <el-radio v-model="updatevisitor.gender" :label="0">女</el-radio>

      <el-form-item label="电话"  prop="phone">
        <el-input v-model="updatevisitor.phone" autocomplete="off" ></el-input>
      </el-form-item>

      <div class="block">
        <span class="demonstration">开始时间</span>
        <el-date-picker
            v-model="updatevisitor.startTime"
            type="date"
            :picker-options="pickerstartTime"
            value-format="yyyy-MM-dd"
            placeholder="选择起始日期">
        </el-date-picker>

        <span class="demonstration">结束时间</span>
        <el-date-picker
            v-model="updatevisitor.endTime"
            type="date"
            :picker-options="pickerendTime"
            value-format="yyyy-MM-dd"
            placeholder="选择结束日期">
        </el-date-picker>
      </div>

      是否确认
      <el-radio v-model="updatevisitor.check" :label="1">是</el-radio>
      <el-radio v-model="updatevisitor.check" :label="0">否</el-radio>

      <el-form-item label="备注"  prop="remark">
        <el-input v-model="updatevisitor.remark" autocomplete="off" ></el-input>
      </el-form-item>

      是否离开
      <el-radio v-model="updatevisitor.leave" :label="1">是</el-radio>
      <el-radio v-model="updatevisitor.leave" :label="0">否</el-radio>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisibleByUpdate = false">取 消</el-button>
      <el-button type="primary" @click="commit">确 定</el-button>
    </div>
  </el-dialog>

  <el-table
    :data="pageInfo.list" v-loading="loading"
    style="width: 100%"
    :row-class-name="tableRowClassName">

    <el-table-column
        prop="name"
        label="姓名"
        width="180">
    </el-table-column>

    <el-table-column
        prop="age"
        label="年龄"
        width="180">
    </el-table-column>

    <el-table-column label="性别">
      <template #default="scope">
        <span v-if="scope.row.gender">男</span>
        <span v-else>女</span>
      </template>
    </el-table-column>

    <el-table-column
        prop="phone"
        label="电话"
        width="180">
    </el-table-column>

    <el-table-column
        prop="startTime"
        label="开始时间"
        :formatter="formatDate"
        width="180">
    </el-table-column>

    <el-table-column
        prop="endTime"
        label="结束时间"
        :formatter="formatDate"
        width="180">
    </el-table-column>

    <el-table-column label="是否确认">
      <template #default="scope">
        <span v-if="scope.row.check">是</span>
        <span v-else>否</span>
      </template>
    </el-table-column>

    <el-table-column
        prop="creatTime"
        label="创建时间"
        :formatter="formatDate"
        width="180">
    </el-table-column>

    <el-table-column
        prop="updateTime"
        label="更新时间"
        :formatter="formatDate"
        width="180">
    </el-table-column>

    <el-table-column
        prop="remark"
        label="备注"
        width="180">
    </el-table-column>

    <el-table-column label="是否离开">
      <template #default="scope">
        <span v-if="scope.row.leave">是</span>
        <span v-else>否</span>
      </template>
    </el-table-column>

    <!-- 逻辑删除 -->
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.$index,scope.row)" type="text" size="small">更新</el-button>
        <el-button @click="handledelect(scope.$index,scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>


  </el-table>
<el-pagination class="pageNum"
   background
   layout="prev, pager, next"
   @current-change="handlePageNum"
   :current-page="pageInfo.pageNum"
   :page-size="pageInfo.pageSize"
   :total="pageInfo.total">
</el-pagination>



</div>
</template>

<script>
let admin = window.localStorage.getItem("admin")
let adminid = JSON.parse(admin)
let id = adminid.id;
export default {
  name: "Visitor",
  data() {
    let _this = this;
    return {
      pickerstartTime: {
        disabledDate(date){
          //当前的日期是否禁用，true表示禁用
          if(_this.visitor.endTime){
            let formatDate = _this.$dayjs(date).format('YYYY-MM-DD');
            return formatDate > _this.visitor.endTime;
          }
          return false;
        }
      },

      pickerendTime:{
        disabledDate(date){
          //当前的日期是否禁用，true表示禁用
          if(_this.visitor.startTime){
            let formatDate = _this.$dayjs(date).format('YYYY-MM-DD');
            return formatDate < _this.visitor.startTime
          }
          return false;
        }
      },
      visitor:{
        name:'',//姓名
        age:'',//年龄
        gender:'',//性别
        phone:'',//电话
        userId:'',//用户（业主）id
        roomId:'',//房间id
        startTime:'',//开始时间
        endTime:'',//结束时间
        check:'',//是否确认
        creatBy:id,//创建用户id
        creatTime:'',//创建时间
        updateBy:'',//更新用户id
        updateTime:'',//更新时间
        remark:'',//备注
        leave:'',//是否离开
      },
      updatevisitor:{
        name:'',//姓名
        age:'',//年龄
        gender:'',//性别
        phone:'',//电话
        startTime:'',//开始时间
        endTime:'',//结束时间
        check:'',//是否确认
        remark:'',//备注
        leave:'',//是否离开
      },
      dialogFormVisible:false,
      dialogFormVisibleByUpdate:false,
      loading: false,
      pageInfo:{},

      formInline:{
        name:'',
        age:'',
        gender:'',
        phone:''
      },
      rules:{
        name: [
          { required:true,message:"请输入姓名", trigger:"blur" },
        ],
        age:[
          { required:true,message:"请输入年龄", trigger:"blur" },
        ],
        phone:[
          { required:true,message:"请输入手机号", trigger:"blur" },
          {
            validator:(rule, value, callback) => {
              let pho = /^1[3-9]\d{9}$/
              if(!pho.test(value)){
                callback(new  Error("手机号不合法"))

              }else {
                callback()
              }
            },trigger:"blur",
          }
        ],

      }
    }
  },
  created() {
    this.onSubmit(1)
  },
  methods: {
    tableRowClassName({row,rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      }else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handlePageNum(pageNum) {
      this.onSubmit(pageNum);
    },
    onSubmit(pageNum){
      this.loading = true;
      let params = {pageNum:pageNum};
      this.visitor.gender = 1
      this.visitor.check = 1
      this.visitor.leave = 1
      this.$axios.post('visitor/pageInfo',this.formInline,{params:params}).then(res => {
        this.pageInfo = res.data.pageInfo;
        this.loading = false;
      })
    },
    handleContinue() {
    this.$axios.post("visitor/insert",this.visitor).then(response => {
      this.onSubmit(1)
      this.visitor = {}
      this.dialogFormVisible = false;
    })
    },
    formatDate(row, column, cellValue) {
      if (!cellValue) return '';
      const date = new Date(cellValue);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    handledelect(index, row) {
      this.$confirm('你真的要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`visitor/`+row.id).then(res => {
          this.onSubmit(1);
        })
      })
    },
    handleClick(index, row) {
     this.dialogFormVisibleByUpdate = true;
      this.$axios.get("visitor/"+row.id).then(res => {
        this.updatevisitor = res.data.visitor;
      })
    },
    commit(){
      this.$axios.post("visitor/update",this.updatevisitor).then(response => {
        this.onSubmit(1)
        this.dialogFormVisibleByUpdate = false;
      })
    }
    // getQuestion(id){
    //   this.$axios.get("visitor/"+id).then(res => {
    //     this.updatevisitor = res.data.visitor;
    //     console.log(res.data.visitor);
    //   })
    // }
  }
}
</script>

<style>
.pageNum {
  display: flex;
  justify-content: center;
  padding: 30px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>